<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta
      name="description"
      content="汇融名企是面向全国商家服务的大型互联网平台，为商家提供流量扶持，引导品牌曝光；为消费者提供风云榜单，招商加盟，引导实现消费，达成合作，上汇融名企实现共赢。"
    />
    <title>招标列表-汇融名企</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/tenderingList.css" />
    <link rel="stylesheet" href="./css/paging.css" />
  </head>
  <body>
    <!-- <div id="header-page"></div> -->
    <!--#include virtual="/header.html" -->
    <div class="content">
      <div class="category-wrapper wrapper" id="category-wrapper"></div>
      <div class="bottom-wrapper wrapper">
        <div class="project-list">
          <div class="tendering-title">
            <div class="left" style="width: 144px; margin-right: 6px;">
              项目类型
            </div>
            <div class="left" style="width: 680px; margin-right: 30px;">
              项目名称
            </div>
            <div class="left" style="width: 109px; margin-right: 6px;">
              项目地区
            </div>
            <div class="left" style="width: 100px;">
              时间
            </div>
            <div class="clear"></div>
          </div>
          <div class="project-item-container" id="project-item-container"></div>
        </div>
        <div class="tenderDetails-content-right">
          <div class="tenderDetails-right-top">
            <div class="tenderDetails-right-top-title">
              <div class="tenderDetails-right-text">热门招标</div>
              <div class="tenderDetails-right-more">
                <a href="tenderingList.html">
                  <span>更多</span>
                  <span>></span>
                </a>
              </div>
            </div>
            <div
              class="tenderDetails-right-list-box"
              id="tenderDetails-right-list-box"
            ></div>
          </div>
          <div class="tenderDetails-right-bottom">
            <div class="tenderDetails-right-up">
              <img src="./image/icon/home_htn_jiantou.png" />
            </div>
            <div class="tenderDetails-right-content">
              <ul class="tenderDetails-right-nav" id="tenderDetails-right-nav">
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb1_img.png" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb3_img.png" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb1_img.png" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb1_img.png" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb1_img.png" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb3_img.png" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="./image/banner/index_zzb1_img.png" />
                  </a>
                </li>
              </ul>
            </div>
            <div class="tenderDetails-right-down">
              <img src="./image/icon/home_htn_jiantou02.png" />
            </div>
          </div>
        </div>
        <div id="page_script"></div>
        <div class="page_left" id="page_left">
          <div id="page" class="page_div"></div>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <!-- <div id="footer-page"></div> -->
    <!--#include virtual="/footer.html" -->
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/jquery.my-message.1.1.js"></script>
    <script src="./js/utils.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script src="./js/ranking.js"></script>
    <script src="./js/api.js"></script>
    <script type="text/javascript">
      var dic = {
        cityName: '所属区域',
        projectType: '招标类型',
        typeName: '行业分类',
      }
      $(function () {
        var api = new ajax('GET', '/api/tendInfo/index')
        api.then(function (res) {
          init(JSON.parse(res).data)
        })
        var params = getSearchParams()
        var listApi = new ajax('GET', '/api/tendInfo/tendIndex', params)
        listApi.then(function (res) {
          var data = JSON.parse(res).data
          initProjectItem(data.tendInfo, $('#project-item-container'))
          setPage(data)
        })
      })
      function init(data) {
        // $('#header-page').load('header.html')
        // $('#footer-page').load('footer.html')
        var title = {
          type: [
            {
              id: 'projectType',
              title: '招标类型',
              children: data['projectType'],
              activeKey: sessionStorage.getItem('projectType'),
            },
            {
              id: 'typeName',
              title: '行业分类',
              children: data['typeName'],
              activeKey: sessionStorage.getItem('typeName'),
            },
          ],
        }
        var tenderingItem = data['hotTender']
        initCategoryCity(data['cityName'])
        initCategory(title.type, $('#category-wrapper'))
        initHotTender(tenderingItem, $('#tenderDetails-right-list-box'))

        // 右侧纵向滚动展示
        var topTimer = ''
        $('.tenderDetails-right-down').click(function (e) {
          e.preventDefault()
          if (!topTimer) {
            var top = $('#tenderDetails-right-nav').css('top').split('px')[0]
            top -= 170
            topTimer = $('#tenderDetails-right-nav').animate(
              {
                top: top + 'px',
              },
              500,
              function () {
                topTimer = ''
                var el = $('#tenderDetails-right-nav').children().eq(0).html()
                $('#tenderDetails-right-nav').append('<li>' + el + '</li>')
                $('#tenderDetails-right-nav').children().eq(0).remove()
                $('#tenderDetails-right-nav').css('top', 0)
              }
            )
          }
        })
        var rightTimer = ''
        $('.tenderDetails-right-up').click(function () {
          if (!rightTimer) {
            var last = $('#tenderDetails-right-nav').children().length - 1
            var el = $('#tenderDetails-right-nav').children().eq(last).html()
            $('#tenderDetails-right-nav').prepend('<li>' + el + '</li>')
            $('#tenderDetails-right-nav').css('top', '-170px')
            rightTimer = $('#tenderDetails-right-nav').animate(
              {
                top: 0 + 'px',
              },
              500,
              function () {
                rightTimer = ''
                $('#tenderDetails-right-nav')
                  .children()
                  .eq(last + 1)
                  .remove()
              }
            )
          }
        })
      }
      function initCategoryCity(data) {
        var cityKey = [
          '全国',
          '热门城市',
          'A',
          'B',
          'C',
          'D',
          'E',
          'F',
          'G',
          'H',
          'J',
          'K',
          'L',
          'M',
          'N',
          'P',
          'Q',
          'R',
          'S',
          'T',
          'W',
          'X',
          'Y',
          'Z',
        ]
        var items = initCityNameItem(cityKey, 'cityName')
        var el = [
          '        <div class="category-container">',
          '          <div class="category-title">所属地区</div>',
          '          <div class="category-item-container type-cityName">',
          items,
          '          </div>',
          '          <div class="category-divider"></div>',
          '          <div class="category-item-container type-cityName" id="cityName-citys">',
          '          </div>',
          '          <div class="category-divider" id="cityName-divider"></div>',
          '        </div>',
        ].join('')
        $('#category-wrapper').append(el)
        if (sessionStorage.getItem('category_city_id')) {
          var id = sessionStorage.getItem('category_city_id').split('-')[0]
          $('#cityName-citys').show()
          $('#cityName-divider').show()
          var secondItems = initCityNameItem(data[id], id)
          $('#cityName-citys').children().remove()
          $('#cityName-citys').append(secondItems)
          $('.city-second').click(citySecondClick)
        }
        $('.city-first').click(function (e) {
          var type = e.currentTarget.id.split('-')[0]
          var id = e.currentTarget.id.split('-')[1]
          if (!$(this).hasClass('category-active')) {
            if (id != '全国') {
              $('#cityName-citys').show()
              $('#cityName-divider').show()
              var secondItems = initCityNameItem(data[id], id)
              $('#cityName-citys').children().remove()
              $('#cityName-citys').append(secondItems)
              $('.city-second').click(citySecondClick)
            } else {
              $('#cityName-citys').hide()
              $('#cityName-divider').hide()
              sessionStorage.removeItem('category_city_id')
              sessionStorage.removeItem('page')
              getData(getSearchParams())
            }
            var itemClass = $(this).parent().attr('class').split(' ')[1]
            $('.' + itemClass).removeClass('category-active')
            $(this).addClass('category-active')
          } else {
            $(this).removeClass('category-active')
            $('#cityName-全国').addClass('category-active')
            $('#cityName-citys').hide()
            $('#cityName-divider').hide()
            getData(getSearchParams())
          }
        })
      }

      function getData(params) {
        var api = new ajax('GET', '/api/tendInfo/tendIndex', params)
        $('.project-item').fadeOut(50, function () {
          $('.project-item').remove()
        })
        api.then(function (res) {
          var data = JSON.parse(res).data
          initProjectItem(data.tendInfo, $('#project-item-container'))
          setPage(data)
        })
      }
      function setPage(data) {
        var html =
          '<div id="page_script"></div><script src="./js/paging.js"><\/script>'
        $('#page_script').html(html)
        $('#page').paging({
          pageNo: data.page,
          totalPage: data.totalPage,
          totalSize: data.total,
          callback: function (num) {
            changePageList(num)
          },
        })
      }
      function changePageList(num) {
        sessionStorage.setItem('page', num)
        getData(getSearchParams())
      }
      function initCityNameItem(data, id) {
        var el = ''
        for (itemKey in data) {
          var currentItem = data[itemKey]
          var flag = sessionStorage.getItem('category_city_id')
            ? currentItem ==
                sessionStorage.getItem('category_city_id').split('-')[0] ||
              currentItem.postal_code ==
                sessionStorage.getItem('category_city_id').split('-')[1]
            : itemKey == 0 && id == 'cityName'
          var temp =
            ' <div id="' +
            id +
            '-' +
            (currentItem.postal_code || currentItem) +
            '" class="cityName-item ' +
            (id != 'cityName' ? 'city-second ' : 'city-first ') +
            'type-' +
            id +
            (flag ? ' category-active' : '') +
            '">' +
            (currentItem.city_name || currentItem) +
            '</div>'
          el += temp
        }
        return el
      }
      function citySecondClick(e) {
        var type = e.currentTarget.id.split('-')[0]
        var id = e.currentTarget.id.split('-')[1]
        if (!$(this).hasClass('category-active')) {
          $('.city-second').removeClass('category-active')
          sessionStorage.setItem('category_city_id', type + '-' + id)
          $(this).addClass('category-active')
        } else {
          sessionStorage.removeItem('category_city_id')
          $(this).removeClass('category-active')
        }
        var params = getSearchParams()
        getData(params)
      }
      function getSearchParams() {
        var dic = {
          招标公告: 1,
          招标预告: 2,
          招标变更: 3,
          中标公告: 4,
          免费招标: 5,
        }
        var params = { page: 1 }
        if (sessionStorage.getItem('typeName')) {
          params.first_type_id = sessionStorage.getItem('typeName')
        }
        if (sessionStorage.getItem('projectType')) {
          params.project_type = dic[sessionStorage.getItem('projectType')]
        }
        if (sessionStorage.getItem('category_city_id')) {
          params.citycode = sessionStorage
            .getItem('category_city_id')
            .split('-')[1]
        }
        if (sessionStorage.getItem('page')) {
          params.page = sessionStorage.getItem('page')
        }
        return params
      }
      function initProjectItem(data, parent) {
        var el = ''
        for (key in data) {
          var currentData = data[key]
          var temp = [
            '   <div id="project-' +
              currentData.tend_id +
              '" class="project-item" ' +
              (key == data.length - 1 ? 'style="border:none;"' : '') +
              '>',
            '       <div class="project-item-type need-text-overflow  left">' +
              currentData.project_type +
              '</div>',
            '       <div class="project-item-title need-text-overflow left">' +
              currentData.entry_name +
              '</div>',

            '       <div class="project-item-location need-text-overflow  left">' +
              currentData.cityName +
              '</div>',
            '       <div class="project-item-time need-text-overflow  left">2019-06-28</div>',
            '       <div class="clear"></div>',
            '    </div>',
          ].join('')
          el += temp
        }
        parent.append(el)
        $('.project-item:even ').css(
          'background',
          'url("./image/picture/project_item_bg.png")'
        )
        $('.project-item').click(function (e) {
          var id = e.currentTarget.id.split('-')[1]
          go('tenderDetails.html?id=' + id)
        })
      }
      function initCategory(data, parent) {
        var el = ''
        for (key in data) {
          var currentData = data[key]
          var items = initCategoryItem(
            currentData.children,
            currentData.id,
            currentData.activeKey
          )
          var temp = [
            '        <div class="category-container">',
            '          <div class="category-title">' +
              currentData.title +
              '</div>',
            '          <div class="category-item-container type-' +
              currentData.id +
              '">',
            items,
            '          </div>',
            key == data.length - 1
              ? ''
              : '          <div class="category-divider"></div>',
            '        </div>',
          ].join('')
          el += temp
        }
        parent.append(el)
        $('.category-item').click(function (e) {
          var type = e.currentTarget.id.split('-')[0]
          var id = e.currentTarget.id.split('-')[1]
          if (!$(this).hasClass('category-active')) {
            var itemClass = $(this).parent().attr('class').split(' ')[1]
            $('.' + itemClass).removeClass('category-active')
            sessionStorage.setItem(type, id)
            sessionStorage.removeItem('page')
            $(this).addClass('category-active')
          } else {
            sessionStorage.removeItem(type)
            sessionStorage.removeItem('page')
            $(this).removeClass('category-active')
          }
          getData(getSearchParams())
        })
      }
      function initCategoryItem(data, id, activeKey) {
        var el = ''
        for (itemKey in data) {
          var currentItem = data[itemKey]
          var flag = activeKey
            ? currentItem.id == activeKey || currentItem == activeKey
            : itemKey == 0
          var temp =
            ' <div id="' +
            id +
            '-' +
            (currentItem.id || currentItem) +
            '" class="category-item ' +
            'type-' +
            id +
            (flag ? ' category-active' : '') +
            '">' +
            (currentItem.ind_name || currentItem) +
            '</div>'
          el += temp
        }
        return el
      }
      function initHotTender(data, parent) {
        var el = ''
        for (key in data) {
          var currentData = data[key]
          var temp = [
            '              <div class="tenderDetails-right-list">',
            '                <a href="tenderDetails.html?id=' +
              currentData.tend_id +
              '">',
            '                  <span>' + currentData.entry_name + '</span>',
            '                  <span>' +
              getDate(currentData.release_time, 3) +
              '</span>',
            '                </a>',
            '              </div>',
          ].join('')
          el += temp
        }
        parent.append(el)
      }
    </script>
  </body>
</html>
